﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行业活动 - 模切材料小管家</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            /* TDesign 工业品色彩系�?*/
            --primary-color: #0052d9;
            --primary-light: #266fe8;
            --primary-dark: #003cab;
            --secondary-color: #f2f3ff;
            --accent-color: #e37318;
            --success-color: #00a870;
            --warning-color: #ed7b2f;
            --error-color: #d54941;
            
            /* 背景色系 */
            --bg-color-page: #f5f7fa;
            --bg-color-container: #ffffff;
            --bg-color-secondray: #f8f9fc;
            
            /* 边框和分割线 */
            --border-color: #e7e7e7;
            --border-color-light: #f0f0f0;
            --border-radius-small: 3px;
            --border-radius-medium: 6px;
            --border-radius-large: 9px;
            
            /* 文字色彩 */
            --text-primary: #1a1a1a;
            --text-secondary: #4e5969;
            --text-placeholder: #86909c;
            --text-disabled: #c9cdd4;
            
            /* 阴影系统 */
            --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-2: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
            --shadow-3: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
            
            /* 间距系统 */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: var(--bg-color-page);
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
            padding-bottom: 64px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            background: var(--bg-color-container);
            min-height: 100vh;
            box-shadow: var(--shadow-1);
            position: relative;
            overflow-x: hidden;
        }
        
        /* 头部样式 - TDesign 简约风�?*/
        .header {
            background: var(--primary-color);
            color: white;
            padding: var(--space-4) var(--space-4) var(--space-5);
            position: relative;
            z-index: 10;
        }
        
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
        }
        
        .back-btn {
            font-size: 18px;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.2s ease;
        }
        
        .back-btn:hover {
            opacity: 1;
        }
        
        .page-title {
            font-weight: 500;
            font-size: 16px;
        }
        
        .actions {
            display: flex;
            gap: var(--space-5);
        }
        
        .actions i {
            font-size: 16px;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.2s ease;
        }
        
        .actions i:hover {
            opacity: 1;
        }
        
        /* 筛选栏 */
        .filter-bar {
            background: var(--bg-color-container);
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border-color-light);
            display: flex;
            gap: var(--space-2);
            align-items: center;
            overflow-x: auto;
        }
        
        .filter-item {
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-medium);
            background: var(--bg-color-secondray);
            color: var(--text-secondary);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            flex-shrink: 0;
        }
        
        .filter-item:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        
        .filter-item.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        /* 活动列表 */
        .activity-list {
            padding: var(--space-4);
        }
        
        .activity-item {
            background: var(--bg-color-container);
            border: 1px solid var(--border-color-light);
            border-radius: var(--border-radius-medium);
            margin-bottom: var(--space-4);
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: var(--shadow-1);
            overflow: hidden;
        }
        
        .activity-item:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-2);
            transform: translateY(-1px);
        }
        
        .activity-image {
            width: 100%;
            height: 160px;
            background: var(--bg-color-secondray);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-placeholder);
            font-size: 48px;
            position: relative;
        }
        
        .activity-status {
            position: absolute;
            top: var(--space-2);
            right: var(--space-2);
            padding: var(--space-1) var(--space-2);
            border-radius: var(--border-radius-small);
            font-size: 11px;
            font-weight: 500;
        }
        
        .status-ongoing {
            background: var(--success-color);
            color: white;
        }
        
        .status-upcoming {
            background: var(--warning-color);
            color: white;
        }
        
        .status-ended {
            background: var(--text-disabled);
            color: white;
        }
        
        .activity-content {
            padding: var(--space-4);
        }
        
        .activity-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--space-2);
            line-height: 1.3;
        }
        
        .activity-description {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: var(--space-3);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .activity-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-3);
        }
        
        .activity-date {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            color: var(--text-secondary);
            font-size: 12px;
        }
        
        .activity-date i {
            color: var(--text-placeholder);
        }
        
        .activity-location {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            color: var(--text-secondary);
            font-size: 12px;
        }
        
        .activity-location i {
            color: var(--text-placeholder);
        }
        
        .activity-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: var(--space-3);
            border-top: 1px solid var(--border-color-light);
        }
        
        .activity-price {
            font-size: 16px;
            font-weight: 600;
            color: var(--accent-color);
        }
        
        .activity-price.free {
            color: var(--success-color);
        }
        
        .activity-actions {
            display: flex;
            gap: var(--space-2);
        }
        
        .action-btn {
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-medium);
            background: var(--bg-color-secondray);
            color: var(--text-secondary);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .action-btn:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        
        .action-btn.primary {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .action-btn.primary:hover {
            background: var(--primary-dark);
        }
        
        /* 空状�?*/
        .empty-state {
            text-align: center;
            padding: var(--space-8) var(--space-4);
            color: var(--text-placeholder);
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: var(--space-4);
            opacity: 0.5;
        }
        
        .empty-state p {
            font-size: 14px;
            margin-bottom: var(--space-4);
        }
        
        .empty-state .btn {
            background: var(--primary-color);
            color: white;
            padding: var(--space-3) var(--space-6);
            border-radius: var(--border-radius-medium);
            text-decoration: none;
            font-size: 14px;
            display: inline-block;
        }
        
        /* 底部导航�?- TDesign 简约风�?*/
        .tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-color-container);
            border-top: 1px solid var(--border-color);
            display: flex;
            z-index: 100;
            max-width: 480px;
            margin: 0 auto;
            height: 64px;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-2) 0;
            cursor: pointer;
            transition: color 0.2s ease;
            color: var(--text-placeholder);
        }
        
        .tab-item.active {
            color: var(--primary-color);
        }
        
        .tab-item:hover {
            color: var(--primary-light);
        }
        
        .tab-item i {
            font-size: 18px;
            margin-bottom: var(--space-1);
        }
        
        .tab-item span {
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部区域 -->
        <div class="header">
            <div class="top-bar">
                <div class="back-btn" onclick="history.back()">
                    <i class="fas fa-arrow-left"></i>
                </div>
                <div class="page-title">行业活动</div>
                <div class="actions">
                    <i class="fas fa-search" onclick="showSearch()"></i>
                    <i class="fas fa-calendar" onclick="showCalendar()"></i>
                </div>
            </div>
        </div>
        
        <!-- 筛选栏 -->
        <div class="filter-bar">
            <div class="filter-item active" data-filter="all" onclick="filterActivities('all')">全部</div>
            <div class="filter-item" data-filter="ongoing" onclick="filterActivities('ongoing')">进行�?/div>
            <div class="filter-item" data-filter="upcoming" onclick="filterActivities('upcoming')">即将开�?/div>
            <div class="filter-item" data-filter="ended" onclick="filterActivities('ended')">已结�?/div>
            <div class="filter-item" data-filter="free" onclick="filterActivities('free')">免费</div>
            <div class="filter-item" data-filter="paid" onclick="filterActivities('paid')">付费</div>
        </div>
        
        <!-- 活动列表 -->
        <div class="activity-list" id="activityList">
            <!-- 活动项将通过JavaScript动态生�?-->
        </div>
        
        <!-- 底部导航 -->
        <div class="tabbar">
            <div class="tab-item" onclick="location.href='home.html'">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item" onclick="location.href='demand-list.html'">
                <i class="fas fa-search"></i>
                <span>求购</span>
            </div>
            <div class="tab-item" onclick="location.href='publish-select.html'">
                <i class="fas fa-plus-circle"></i>
                <span>发布</span>
            </div>
            <div class="tab-item" onclick="location.href='consultation.html'">
                <i class="fas fa-comments"></i>
                <span>客服</span>
            </div>
            <div class="tab-item" onclick="location.href='profile.html'">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 模拟活动数据
        const activityData = [
            {
                id: 1,
                title: '2024年模切材料行业技术交流会',
                description: '汇聚行业专家，分享最新技术趋势，探讨模切材料在电子、汽车、包装等领域的应用前景�?,
                date: '2024-02-15',
                time: '09:00-17:00',
                location: '深圳国际会展中心',
                price: 0,
                status: 'upcoming',
                image: 'fas fa-users',
                attendees: 120
            },
            {
                id: 2,
                title: '胶带技术创新研讨会',
                description: '深入探讨胶带材料的最新技术突破，包括环保型胶粘剂、高性能基材等前沿技术�?,
                date: '2024-01-20',
                time: '14:00-18:00',
                location: '上海浦东新区',
                price: 299,
                status: 'ongoing',
                image: 'fas fa-flask',
                attendees: 85
            },
            {
                id: 3,
                title: '工业材料供应链管理培�?,
                description: '学习现代供应链管理理念，提升采购效率，降低库存成本，优化供应商关系�?,
                date: '2024-01-10',
                time: '09:00-16:00',
                location: '广州琶洲会展中心',
                price: 0,
                status: 'ended',
                image: 'fas fa-shipping-fast',
                attendees: 200
            },
            {
                id: 4,
                title: '薄膜材料应用案例分享�?,
                description: '通过实际案例分享，了解薄膜材料在不同行业的创新应用，提升产品竞争力�?,
                date: '2024-02-28',
                time: '10:00-15:00',
                location: '苏州工业园区',
                price: 199,
                status: 'upcoming',
                image: 'fas fa-layer-group',
                attendees: 60
            },
            {
                id: 5,
                title: '环保材料发展趋势论坛',
                description: '探讨环保材料的发展趋势，绿色制造工艺，可持续发展战略等热点话题�?,
                date: '2024-01-25',
                time: '13:00-17:00',
                location: '北京国家会议中心',
                price: 0,
                status: 'ongoing',
                image: 'fas fa-leaf',
                attendees: 150
            }
        ];
        
        let currentFilter = 'all';
        
        // 渲染活动列表
        function renderActivityList(activities) {
            const container = document.getElementById('activityList');
            
            if (activities.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-calendar-times"></i>
                        <p>暂无相关活动</p>
                        <a href="#" class="btn" onclick="resetFilter()">查看全部活动</a>
                    </div>
                `;
                return;
            }
            
            container.innerHTML = activities.map(activity => `
                <div class="activity-item" onclick="goToActivityDetail(${activity.id})">
                    <div class="activity-image">
                        <i class="${activity.image}"></i>
                        <div class="activity-status status-${activity.status}">
                            ${getStatusText(activity.status)}
                        </div>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">${activity.title}</div>
                        <div class="activity-description">${activity.description}</div>
                        <div class="activity-meta">
                            <div class="activity-date">
                                <i class="fas fa-calendar"></i>
                                <span>${activity.date} ${activity.time}</span>
                            </div>
                            <div class="activity-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>${activity.location}</span>
                            </div>
                        </div>
                        <div class="activity-footer">
                            <div class="activity-price ${activity.price === 0 ? 'free' : ''}">
                                ${activity.price === 0 ? '免费' : `¥${activity.price}`}
                            </div>
                            <div class="activity-actions">
                                <button class="action-btn" onclick="event.stopPropagation(); shareActivity(${activity.id})">
                                    <i class="fas fa-share"></i>
                                </button>
                                <button class="action-btn ${activity.status === 'upcoming' || activity.status === 'ongoing' ? 'primary' : ''}" 
                                        onclick="event.stopPropagation(); registerActivity(${activity.id})">
                                    ${getActionText(activity.status)}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
        }
        
        // 获取状态文�?
        function getStatusText(status) {
            const statusMap = {
                'ongoing': '进行�?,
                'upcoming': '即将开�?,
                'ended': '已结�?
            };
            return statusMap[status] || status;
        }
        
        // 获取操作按钮文本
        function getActionText(status) {
            const actionMap = {
                'ongoing': '立即参加',
                'upcoming': '立即报名',
                'ended': '已结�?
            };
            return actionMap[status] || '查看详情';
        }
        
        // 筛选活�?
        function filterActivities(filter) {
            currentFilter = filter;
            
            // 更新筛选按钮状�?
            document.querySelectorAll('.filter-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector(`[data-filter="${filter}"]`).classList.add('active');
            
            // 筛选活�?
            let filteredActivities = activityData;
            if (filter !== 'all') {
                filteredActivities = activityData.filter(activity => {
                    if (filter === 'ongoing' || filter === 'upcoming' || filter === 'ended') {
                        return activity.status === filter;
                    } else if (filter === 'free') {
                        return activity.price === 0;
                    } else if (filter === 'paid') {
                        return activity.price > 0;
                    }
                    return true;
                });
            }
            
            renderActivityList(filteredActivities);
        }
        
        // 跳转到活动详�?
        function goToActivityDetail(activityId) {
            location.href = `activity-detail.html?id=${activityId}`;
        }
        
        // 分享活动
        function shareActivity(activityId) {
            const activity = activityData.find(a => a.id === activityId);
            if (activity) {
                if (navigator.share) {
                    navigator.share({
                        title: activity.title,
                        text: activity.description,
                        url: window.location.href
                    });
                } else {
                    navigator.clipboard.writeText(window.location.href).then(() => {
                        alert('活动链接已复制到剪贴�?);
                    });
                }
            }
        }
        
        // 报名活动
        function registerActivity(activityId) {
            const activity = activityData.find(a => a.id === activityId);
            if (activity) {
                if (activity.status === 'ended') {
                    alert('该活动已结束，无法报�?);
                } else {
                    alert(`报名${activity.title}成功！`);
                }
            }
        }
        
        // 重置筛�?
        function resetFilter() {
            filterActivities('all');
        }
        
        // 显示搜索
        function showSearch() {
            const searchTerm = prompt('请输入搜索关键词�?);
            if (searchTerm) {
                const filteredActivities = activityData.filter(activity => 
                    activity.title.includes(searchTerm) || 
                    activity.description.includes(searchTerm) ||
                    activity.location.includes(searchTerm)
                );
                renderActivityList(filteredActivities);
            }
        }
        
        // 显示日历
        function showCalendar() {
            alert('日历功能开发中...');
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            renderActivityList(activityData);
        });
        
        // 底部导航切换
        document.querySelectorAll('.tab-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
    </script>
</body>
</html>


